<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>举报管理</el-breadcrumb-item>
            <el-breadcrumb-item>举报列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <el-row :gutter="20">
                <el-col :span="8">
                  <el-button type="primary" @click="searchReport(-1)">全部</el-button>
                  <el-button type="danger" @click="searchReport(0)">未处理</el-button>
                  <el-button type="warning" @click="searchReport(1)">处理中</el-button>
                  <el-button type="success" @click="searchReport(2)">已处理</el-button>
                </el-col>
            </el-row>
            <el-table :data="reportList" border stripe>
                <el-table-column type="index"></el-table-column>
                <el-table-column label="ID" prop="id"></el-table-column>
                <el-table-column label="举报人" prop="reportUserName"></el-table-column>
                <el-table-column label="被举报人" prop="beReportedUsername"></el-table-column>
                <el-table-column label="举报时间" prop="reportTime"></el-table-column>
                <el-table-column label="举报原因">
                  <template slot-scope="scope">
                    <el-popover trigger="hover" placement="top">
                      <p>被举报内容: {{ scope.row.remarkText }}</p>
                      <p>举报人: {{ scope.row.reportUserName }}</p>
                      <p>举报原因: {{ scope.row.reportText }}</p>
                      <div slot="reference" class="name-wrapper">
                        <el-tag size="medium">详情</el-tag>
                      </div>
                    </el-popover>
                  </template>
                </el-table-column>

              <el-table-column label="状态">
                <template slot-scope="scope">
                  <span v-if="scope.row.status==0">未处理</span>
                  <span v-else-if="scope.row.status==1">处理中</span>
                  <span v-else-if="scope.row.status==2">已处理</span>
                </template>
              </el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button
                        size="mini"
                        @click="handItView(scope.row)">处理</el-button>
                  </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="this.pageNum"
                    :page-sizes="[2, 4 , 6, 12]"
                    :page-size="this.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
            ></el-pagination>
        </el-card>
        <!--处理-->
      <el-drawer
          title="处理举报"
          :visible.sync="HandleVisible"
          :with-header="false">
        <span>{{this.HandleForm.reportUserName}} id: {{this.HandleForm.reportUserId}} </span>
        <h4>举报了</h4>
        <span>{{this.HandleForm.beReportedUsername}} id:{{this.HandleForm.beReportedUserId}}</span>
        <br>
        <h4>被举报评论内容:</h4>
        <span>{{this.HandleForm.remarkText}}</span>
        <br>
        <h4>举报原因:</h4>
        <h5>{{this.HandleForm.reportText}}</h5>
        <img :src="imgPath+this.HandleForm.imgUrl" style="width: 250px; height: 205px">
        <el-switch
            style="display: block"
            v-model="lockUser"
            active-text="锁定用户"
            inactive-text="不锁定用户">
        </el-switch>
        <el-switch
            style="display: block"
            v-model="lockRemark"
            active-text="删除评论"
            inactive-text="不删除评论">
        </el-switch>
        <el-button type="primary" @click="submit()">提 交</el-button>
        <el-button @click="closef()">取 消</el-button>
      </el-drawer>

    </div>
</template>
<script>
    export default {
        data() {
            return {
                statue:'-1',
                lockUser:true,
                lockRemark:true,
                HandleVisible: false,
                pageNum: 1,
                pageSize: 6,
                reportList: [],
                total: 9,
                reportUserId:'',
                imgPath:this.$baseUrl.imgUrl+'imgs/',
                HandleForm: {
                },
            };
        },
        methods: {
             submit(){
               if (this.lockUser==true){
                 let url=this.$baseUrl.baseUrl+'user/lock'
                 this.$axios.get(url,{
                   params:{
                     uid:this.HandleForm.beReportedUserId,
                     status:1
                   }
                 }).then((resp)=>{
                   if (resp.data.code==200){
                     this.$message.success(resp.data.msg)
                   }
                 })
               }
               if (this.lockRemark==true){
                 let url=this.$baseUrl.baseUrl+'remark/del'
                 this.$axios.delete(url,{
                   params:{
                     id:this.HandleForm.remarkId
                   }
                 }).then((resp)=>{
                   if (resp.data.code==200){
                     this.$message.success(resp.data.msg)
                   }
                 })

               }
               this.HandleVisible=false
               let url=this.$baseUrl.baseUrl+'report/updateStatus'
               this.$axios.delete(url,{
                 params:{
                   ids:this.HandleForm.id,
                   fromStatus:1,
                   toStatus:2
                 }
               }).then((resp)=>{
                 if (resp.data.code==200){
                   this.message.success(resp.data.msg)
                 }
               })
             },
             closef(){
               this.HandleVisible=false
             },
            handItView(row){
              this.HandleVisible=true
              this.HandleForm=row

            },
          //提交处理
            editUser(){

            },
            getReportList() {
              let url=this.$baseUrl.baseUrl+"report/list"
              this.$axios.get(url,{
                params:{
                  status:this.statue,
                  reportType:1,
                  pageNum:this.pageNum,
                  pageSize:this.pageSize,
                  reportUserId:this.reportUserId
                }
              }).then((resp)=>{
                if (resp.data.code==200){
                  this.reportList=resp.data.data.list
                  this.pageNum=resp.data.data.pageNum
                  this.pageSize=resp.data.data.pageSize
                  this.total=resp.data.data.total
                }else {
                  alert(resp.data.msg)
                }
              })


            },
            searchReport(status) {
               this.statue=status
               this.getReportList();
            },
            handleSizeChange(newSize) {
                this.pageSize = newSize;
                this.getReportList();
            },
            handleCurrentChange(newPage) {
                this.pageNum = newPage;
                this.getReportList();
            },
            //把用户对象中包含的roleList其中的rolename转换为逗号分隔的字符串
            getRoleNames(arr) {
                if (!arr) return;
                let roleNameArr = new Array();
                for (let i = 0; i < arr.length; i++) {
                    roleNameArr.push(arr[i].name);
                }
                return roleNameArr.join(",");
            },

            reloadData() {
                this.searchReport(-1);
            }
        },
        created() {
            this.reloadData();
        }
    };
</script>
<style lang="less" scoped>
</style>